<template>
  <li class="item">
    <!-- @打头的属性为自定义事件，均被子组件触发，用于子组件向父组件发送数据 -->
    <!-- 非@打头的属性为父组件向子组件传入的数据 -->
    <CheckBox :checked="checked" :iId="iId" @setCheck="setCheckFn" />
    <WriteSpan :title="title" :isSet="isSet" />
    <input type="button" value="删除" @click="send(iId)">
  </li>
</template>

<script>
import WriteSpan from "./WriteSpan.vue";
import CheckBox from "./CheckBox.vue";
export default {
  components:{
    WriteSpan, CheckBox
  },
  props:["title", "checked", "isSet", "iId"],
  methods:{
    // 向父组件发送id（用于给父组件做删除功能）
    send(id){
      this.$emit("del", id);
    },
    // 向父组件发送id和选中状态（用于给父组件做修改选中状态功能）
    setCheckFn(val, id){
      this.$emit("itemCheck", val, id);
    }
  }
}
</script>

<style>
.item{
  display: flex;
}
</style>